<div fxFlex class="manage-sidenav-content">
  <div class="header">
    <button mat-raised-button color="primary">
      <mat-icon>add</mat-icon> 上传</button>
    <button mat-raised-button *ngIf="fileSelected.length">
      <mat-icon>share</mat-icon> 分享</button>
    <button mat-raised-button *ngIf="fileSelected.length" (click)="onDeleteTrigger()">
      <mat-icon>delete</mat-icon> 删除</button>
    <button mat-raised-button *ngIf="fileSelected.length">
      <mat-icon>file_download</mat-icon> 下载</button>
  </div>


  <div class="stbui-table-main mat-elevation-z2">
    <div class="stbui-table-toolbar" fxLayout="row" fxLayoutAlign="start center">
      <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex="50px">
        <span>
          <mat-checkbox (change)="onCheckBoxAllTrigger($event)"></mat-checkbox>
        </span>
      </div>
      <div class="start-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
        <span>名称</span>
      </div>
      <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
        <span>类型</span>
      </div>
      <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
        <span>提供者</span>
      </div>
      <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
        <span>大小</span>
      </div>
      <div class="end-wrapper" fxLayout="row" fxLayoutAlign="end center" fxFlex="80px">
        <span>修改时间</span>
      </div>
    </div>

    <div class="stbui-table-list">
      <div class="stbui-table" fxLayout="row" *ngFor="let file of files">
        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex="50px">
          <mat-checkbox [checked]="checked" (change)="onCheckBoxTrigger($event, file)"></mat-checkbox>
        </div>

        <div class="start-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <mat-icon>folder</mat-icon> {{ file.name }}
        </div>

        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <span>{{ file.type }}</span>
        </div>

        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <span>{{ file.provide }}</span>
        </div>

        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <span>{{ file.size | fileSize }}</span>
        </div>

        <div class="end-wrapper" fxLayout="row" fxLayoutAlign="end center" fxFlex="80px">
          <span>{{ file.lastModifiedDate | date:"yyyy/MM/dd" }}</span>
        </div>
      </div>
    </div>
  </div>

</div>